<template>
  <div class="panel-right-container">
    <DataPanel
      class="panel-item-container"
      title="物业部设施状态"
      :height="35"
      icon="/static/img/park/property/facilities.webp"
    >
      <div class="equipment-container">
        <img
          class="equipment-img"
          src="/static/img/park/property/equipment.png"
        />
        <div
          class="equipment-item"
          v-for="(item, index) in equipmentList"
          :key="index"
          :class="`equipment-item-${index}`"
          v-html="equipmentItemHandler(item)"
        ></div>
      </div>
    </DataPanel>

    <DataPanel
      class="panel-item-container"
      title="工单处理统计"
      :height="35"
      icon="/static/img/park/property/work-order.webp"
    >
      <div class="work-order-statistics-container">
        <div class="work-order-statistics-btn-container">
          <RadioGroup
            :options="radioGroupOptions"
            :active-key="0"
            @change="radioGroupChangeEvent"
          />
        </div>
        <chart-view
          class="work-order-statistics-charts"
          :chart-option="multipleLineOption"
          :auto-resize="true"
          height="100%"
        />
      </div>
    </DataPanel>

    <DataPanel
      class="panel-item-container"
      title="代办提醒"
      :height="30"
      icon="/static/img/park/property/remind.webp"
    >
      <dv-scroll-board class="scroll-board" :config="dvScrollBoardConf" />
    </DataPanel>
  </div>
</template>

<script>
import { generateEquipmentItem } from "./configs/equipment-item";
import { multipleLineOptionHandler } from "./configs/line.conf";
import DataPanel from "@/components/park/dataPanel.vue";
import RadioGroup from "@/components/RadioGroup/RadioGroup.vue";

//#region 临时展示数据--START
import {
  generateEquipmentData,
  generateWorkOrderData,
  generateTodoReminderData
} from "../../temp/data";
// #endregion 临时展示数据--END

// dataV 公共配置
const dvScrollBoardCommConf = {
  headerBGC: "rgba(0,0,0,0)",
  oddRowBGC: "rgba(0,0,0,0)",
  evenRowBGC: "rgba(0,0,0,0)",
  rowNum: 5
};

export default {
  name: "RightPanel",
  components: {
    DataPanel,
    RadioGroup
  },
  data() {
    return {
      // 物业部设备状态相关数据
      equipmentList: [],

      // 工单处理统计相关数据
      radioGroupOptions: [
        {
          label: "今日",
          key: 0
        },
        {
          label: "本月",
          key: 1
        },
        {
          label: "本年",
          key: 2
        }
      ],
      workOrderStatisticsList: [],

      // 待办提醒相关数据
      todoReminderList: [],
      dvScrollBoardConf: {
        data: [],
        ...dvScrollBoardCommConf
      }
    };
  },

  computed: {
    multipleLineOption() {
      return multipleLineOptionHandler(this.workOrderStatisticsList);
    }
  },

  created() {
    // 获取相关数据方法
    this.getEquipmentData();
    this.getWorkOrderStatisticsData();
    this.getTodoReminderData();
  },

  methods: {
    /**
     * 设备项处理方法
     * @param {Object} data 传入设备项数据
     * @return {Object} 返回 SVG
     */
    equipmentItemHandler(data) {
      const { name, state } = data;
      const stateText = ["正常", "异常"][state];
      const compoundData = { name, state, stateText };
      return generateEquipmentItem(compoundData);
    },

    /**
     * radio group change 事件
     * @param {String|Number} key
     */
    radioGroupChangeEvent(key) {
      this.workOrderStatisticsList = generateWorkOrderData(key);
    },

    /**
     * 获取物业部设施状态数据方法
     */
    getEquipmentData() {
      this.equipmentList = generateEquipmentData();
    },

    /**
     * 获取工单处理统计数据方法
     */
    getWorkOrderStatisticsData() {
      this.workOrderStatisticsList = generateWorkOrderData(0);
    },

    /**
     * 获取代办提醒数据方法
     */
    getTodoReminderData() {
      const res = generateTodoReminderData();
      const reminderList = this.dvScrollBoardDataConfHandler(res);

      this.dvScrollBoardConf = {
        data: reminderList,
        ...dvScrollBoardCommConf
      };
    },

    /**
     * dataV 轮播表格数据处理方法
     * @param {Object} data 传入需要处理的数据
     * @return {Array} 处理后的数据
     */
    dvScrollBoardDataConfHandler(data) {
      const reminderList = [];
      data.forEach(item => {
        const reminderItemData = [
          `<div class="scroll-board-item">
            <div class="scroll-board-item-text">${item.name}</div>
            <div class="scroll-board-item-date">${item.date}</div>
          </div>`
        ];
        reminderList.push(reminderItemData);
      });

      return reminderList;
    }
  }
};
</script>

<style lang="less" scoped>
.panel-right-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .panel-item-container {
    height: 100%;

    // 物业部设施状态区域样式
    .equipment-container {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 1.5625rem;

      .equipment-img {
        width: 18.75rem;
        height: 12.5rem;
      }

      .equipment-item {
        position: absolute;
      }

      .equipment-item-0 {
        top: 35%;
        left: 8%;
      }

      .equipment-item-1 {
        top: -3%;
        left: 18%;
      }

      .equipment-item-2 {
        top: -3%;
        right: 18%;
      }

      .equipment-item-3 {
        top: 35%;
        right: 8%;
      }
    }

    // 工单处理统计区域样式
    .work-order-statistics-container {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;

      .work-order-statistics-charts {
        height: 100%;
      }

      .work-order-statistics-btn-container {
        position: absolute;
        top: 7%;
        right: 5%;
      }
    }

    // 待办提醒区域样式
    .scroll-board {
      width: 100%;
      height: 100%;

      /deep/ .scroll-board-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0.3125rem 0;
        margin-left: -10%;
        padding: 0 11%;
        background: linear-gradient(
          90deg,
          rgba(11, 109, 218, 0.3) 0%,
          rgba(68, 170, 255, 0.8) 81%,
          #64baff 100%
        );

        .scroll-board-item-text {
          overflow: hidden;
        }

        .scroll-board-item-date {
          flex-shrink: 0;
          margin-left: 0.625rem;
        }
      }
    }
  }
}
</style>
